<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    body{
      margin: 0 0 0 0 ;
      overflow: hidden;
    }
    .main{
      margin: 0 0 0 0;
      overflow: hidden;
    }
    button{
      width:200px;
      height:60px;
      font-size: 25px;
      background-color:#21bf73 ;
      color: white;
      border:none;
      border-radius: 10px;


    }
    .form_1{
      width:400px;
      height:300px;
      border:3px solid #f8f8f8;
      visibility: hidden;
      position: absolute;
      z-index: 999;
      opacity: 1;
      overflow: hidden;
      background-color: white;
      text-align: center;
      margin-top: 10%;
      margin-left: 35%;
      border-radius: 10px;
    }
    .open{
      visibility: visible;
      opacity: 1;
    }
    .input_1{
      margin-top: 15px;
      width:100%;
      height:40px;

    }
    input{
      width:280px;
      height:30px;
      border-radius: 5px;
      border:1px solid  #e5dfdf;
    }
    .input_1 .login_logo{
      text-align: left;
      font-size: 20px;
      font-weight: 300;
      padding-left: 30px;
      float: left;
    }
    .input_1 .close{
      width:20px;
      height:20px;
      color:#5d5d5d;
      text-align: center;
      line-height: 20px;
      border:1px solid  #5d5d5d;
      border-radius: 50%;
      float: right;
      padding-top: 0px;
      margin-right: 10px;
      font-size: 12px;
    }
    .input_1 .close:hover{
      cursor:pointer;
    }
    hr{
      background-color: #F8F8F8;
    }

    .input_1 .submit_1{
      border:2px solid #f88020;
      height:40px;
      background-color: white;
    }
    .input_1 .submit_1:hover{
      background-color: #f88020;
      color:white;
    }
    .test{
      overflow: hidden;
    }
    #btn_2{
      background-color: #F88020;
    }
    .dialog{
      width:300px;
      height:120px;
      border:2px solid #46b3e6;
      overflow: hidden;
      visibility: hidden;
      z-index: 999;
      overflow: hidden;
      opacity: 1;
      position: absolute;
      background-color: white;
      margin-top: 5%;
      margin-left: 40%;
    }
    .dialog .title{
      text-align: center;
      font-size: 20px;
      font-weight: 300;
      margin-top: 28px;
      margin-bottom: 25px;
    }
    .dialog  .btn_2{
      width:50%;
      height:40px;
      float:left;
      background-color: #dff6f0;
      line-height: 40px;
      color: black;
      text-align: center;
      margin-bottom: 0px;
    }
    .dialog .btn_2:hover{
      background-color:#F88020 ;
    }
    .dialog  .close_1{
      overflow: hidden;
      width:50%;
      height:40px;
      background-color: red;
      margin-bottom: 0px;
      line-height: 40px;
      color: white;
      text-align: center;
    }
    .dialog .close_1:hover{
      background-color: #f4f4f4;
      color:red;
      cursor: cell;
    }
  </style>

</head>
<body>
<div class="main">
  <button id="btn_1"> 弹 框 输 入</button>
  <div class="form_1">
    <form >
      <div class="input_1"><div class="login_logo">用户登录</div><div class="close">X</div></div>
      <hr>
      <div class="input_1"><input type="text" name="user" placeholder="&nbsp;用户名"></div>
      <div class="input_1"><input type="password" name="password" placeholder="&nbsp;密码"></div>
      <div class="input_1"><input class="submit_1" type="submit" value="提&nbsp;交"></div>
    </form>
  </div>
</div>

<div class="test"><h1>弹框登录，输入文字，可开发与后台交互，直接用</h1></div>
<button id="btn_2"> 弹 框 提 示</button>
<div class="dialog">
  <div class="title">恭喜：操作成功 !</div>
  <div class="btn_2">确定</div>
  <div class="close_1">取消</div>

</div>

<div class="test">
  <h1>弹框提示，自行修改提示内容即可</h1>
</div>

<script>window.onload=function(){
  var btn_1=document.getElementById("btn_1");
  var btn_2=document.getElementById("btn_2");
  var close=document.getElementsByClassName("close");
  var close_1=document.getElementsByClassName("close_1");
  var dialog=document.getElementsByClassName("dialog");
  var form_1=document.getElementsByClassName("form_1");
  btn_1.addEventListener('click',function(){
    form_1[0].className="form_1 open";
  })
  close[0].addEventListener('click',function(){
    form_1[0].className="form_1";
  })
  btn_2.addEventListener('click',function(){
    dialog[0].style.visibility='visible';
  })
  close_1[0].addEventListener('click',function(){
    dialog[0].style.visibility='hidden';
  })
};
</script>
</body>
</html>